const DraggableComponents = {
  'DraggableSearch': {
    icon: 'icon-search',
    type: 'search',
    title: '搜索框',
    props: {
      // 热词
      placeholder: [],
      // 文本位置 居左  居中
      textAlign: 'left',
      // 框体样式： 方形 圆形
      borderRadius: false,
      // 框体高度
      height: 40,
      // 背景颜色
      backgroundColor: '#F9F9F9',
      // 框体颜色
      borderBackgroundColor: '#FFFFFF',
      // 文本颜色
      textColor: '#969799'
    }
  },
  'DraggableNotice': {
    icon: 'icon-gonggao',
    type: 'notice',
    title: '公告',
    props: {
      msg: '',
      backgroundColor: '#FFEFB8',
      textColor: '#646566'
    }
  },
  'DraggableImage': {
    icon: 'icon-tupian',
    type: 'image',
    title: '图片',
    props: {
      // 图片路径
      src: '',
      // 跳转链接
      link: '',
      // 标题
      title: '',
      imgStyle: 1,
      borderRadius: false,
      // 页面边距
      pagePadding: 0,
      // 图片间距
      imgMargin: 0
    }
  },
  'DraggableRubikSCube': {
    icon: 'icon-shujumofang',
    type: 'rubik-s-cube',
    title: '魔方',
    props: {
      // 模板
      templateId: 'RowTwoCols',
      // 图片间距
      imageGutter: 0,
      // 页面间距
      pageGutter: 0,
      // 具体的图片及链接等信息
      list: []
    }
  },
  'DraggableSwipe': {
    icon: 'icon-lunbotuguanli',
    type: 'swipe',
    title: '轮播图',
    props: {
      list: [],
      chamfer: 1,
      imgStyle: 1,
      fillStyle: 1,
      pagePadding: 0
    }
  },
  'DraggableNavBar': {
    icon: 'icon-navbar',
    type: 'nav-bar',
    title: '导航',
    props: {
      list: [{
        imgSrc: '',
        title: '标题1',
        link: ''
      }, {
        imgSrc: '',
        title: '标题2',
        link: ''
      }, {
        imgSrc: '',
        title: '标题3',
        link: ''
      }, {
        imgSrc: '',
        title: '标题4',
        link: ''
      }],
      rowCount: 4,
      total: 4,
      backgroundColor: '#FFFFFF',
      textColor: '#000000'
    }
  },
  'DraggableProduct': {
    icon: 'icon-shopping',
    type: 'product',
    title: '商品',
    props: {}
  }
}

const CubeTemplates = [{
  value: 'RowTwoCols',
  label: '一行两个',
  len: 2,
  icon: 'icon-yihangge1'
}, {
  value: 'RowThreeCols',
  label: '一行三个',
  len: 3,
  icon: 'icon-yihangge2'
}, {
  value: 'RowFourCols',
  label: '一行四个',
  len: 4,
  icon: 'icon-yihangge1'
}, {
  value: 'TwoLeftTwoRight',
  label: '二左二右',
  len: 4,
  icon: 'icon-mofang-xuanzemoban-erzuoeryou'
}, {
  value: 'LeftTwoRight',
  label: '一左二右',
  len: 3,
  icon: 'icon-mofang-xuanzemoban-yizuoeryou'
}, {
  value: 'UpTwoDown',
  label: '一上二下',
  len: 3,
  icon: 'icon-mofang-xuanzemoban-yishangerxia'
}, {
  value: 'LeftThreeRight',
  label: '一左三右',
  len: 4,
  icon: 'icon-mofang-xuanzemoban-yizuosanyou'
}]

// const ImageScale = ['3:2', '1:1', '3:4', '16:9']
const ImageScale = [{
  value: 1,
  label: '3:2',
  icon: 'icon-tupianbili32'
}, {
  value: 2,
  label: '1:1',
  icon: 'icon-tupianbili11'
}, {
  value: 3,
  label: '3:4',
  icon: 'icon-tupianbili34'
}, {
  value: 4,
  label: '16:9',
  icon: 'icon-tupianbili169'
}]

const Chamfer = [{ label: '直角', value: 1, icon: 'icon-zhijiao' }, { label: '圆角', value: 2, icon: 'icon-yuanjiao' }]

const FillStyle = [{ label: '填充', value: 1, icon: 'icon-tianchong' }, { label: '周边留白', value: 2, icon: 'icon-zhoubianliubai' }]

const ImgStyle = [{ label: '常规', value: 1, icon: 'icon-normal' }, { label: '投影', value: 2, icon: 'icon-touying' }]

const ListStyle = [{
  label: '大图模式',
  value: 1,
  icon: 'icon-datumoshi'
}, {
  label: '一行两个',
  value: 2,
  icon: 'icon-yihangliangge'
}, {
  label: '一行三个',
  value: 3,
  icon: 'icon-yihangsange'
}, {
  label: '详细列表',
  value: 4,
  icon: 'icon-xiangxiliebiao'
}, {
  label: '一大两小',
  value: 5,
  icon: 'icon-mofang-xuanzemoban-yishangerxia'
}, {
  label: '横向滑动',
  value: 6,
  icon: 'icon-hengxianghuadong'
}]

const ProductStyle = [{
  label: '无底白边',
  value: 1
}, {
  label: '卡片投影',
  value: 2
}, {
  label: '描边白底',
  value: 3
}, {
  label: '无边透明底',
  value: 4
}]

const TextStyle = [{
  label: '常规体',
  value: 1,
  icon: 'icon-changguiti'
}, {
  label: '加粗体',
  value: 2,
  icon: 'icon-dianpuzhuangxiu-jiacuti-caozuolan'
}]

const TextAlign = [{
  label: '左对齐',
  value: 1,
  icon: 'icon-zuoduiqi'
}, {
  label: '居中对齐',
  value: 2,
  icon: 'icon-juzhong'
}]

export default DraggableComponents

export {
  ImageScale,
  CubeTemplates,
  Chamfer,
  FillStyle,
  ImgStyle,
  ListStyle,
  ProductStyle,
  TextStyle,
  TextAlign
}
